<template>
  <el-container style="height: 100vh">
    <!-- 侧边栏 -->
    <el-aside width="200px" class="sidebar">
      <div class="logo">东软颐养中心</div>
      <el-menu
          :default-active="activeMenu"
          :router="true"
          class="menu-custom"
      >
        <!-- 管理员专属菜单 -->
        <template v-if="role === '管理员'">
          <el-sub-menu index="userManagement">
            <template #title>
              <el-icon><Avatar /></el-icon> 用户管理
            </template>
            <el-menu-item index="/userList">
              <el-icon><Setting /></el-icon> 用户信息维护
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="clientManagement">
            <template #title>
              <el-icon><UserFilled /></el-icon> 客户管理
            </template>
            <el-menu-item index="/client">
              <el-icon><User /></el-icon> 客户列表
            </el-menu-item>
            <el-menu-item index="/outingRecord">
              <el-icon><MapLocation /></el-icon> 外出列表
            </el-menu-item>
            <el-menu-item index="/checkOutRecord">
              <el-icon><SwitchButton /></el-icon> 退住列表
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="mealCalendar">
            <template #title>
              <el-icon><Food /></el-icon> 膳食管理
            </template>
            <el-menu-item index="/mealCalendar">
              <el-icon><Calendar /></el-icon> 膳食日历
            </el-menu-item>
            <el-menu-item index="/mealSet">
              <el-icon><Menu /></el-icon> 客户膳食配置
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="bed">
            <template #title>
              <el-icon><House /></el-icon> 床位管理
            </template>
            <el-menu-item index="/bed">
              <el-icon><MapLocation /></el-icon> 床位示意图
            </el-menu-item>
            <el-menu-item index="/bedRecord">
              <el-icon><Files /></el-icon> 床位记录管理
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="careManagement">
            <template #title>
              <el-icon><List /></el-icon> 护理管理
            </template>
            <el-menu-item index="/careLevel">
              <el-icon><Service /></el-icon> 护理级别管理
            </el-menu-item>
            <el-menu-item index="/careItem">
              <el-icon><List /></el-icon> 护理项目管理
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="serviceManagement">
            <template #title>
              <el-icon><Tools /></el-icon> 服务管理
            </template>
            <el-menu-item index="/careWorker">
              <el-icon><User /></el-icon> 健康管家列表
            </el-menu-item>
            <el-menu-item index="/clientCareItem">
              <el-icon><Food /></el-icon> 护理服务关注
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="visualizationPanel">
            <template #title>
              <el-icon><Histogram /></el-icon> 可视化面板
            </template>
            <el-menu-item index="/visualization">
              <el-icon><DataLine /></el-icon> 数据面板
            </el-menu-item>
          </el-sub-menu>
        </template>

        <!-- 健康管家专属菜单 -->
        <template v-if="role === '健康管家'">
          <el-sub-menu index="clientCarerManagement">
            <template #title>
              <el-icon><Avatar /></el-icon> 客户管理
            </template>
            <el-menu-item index="/clientCarer">
              <el-icon><UserFilled /></el-icon> 客户列表
            </el-menu-item>
            <el-menu-item index="/outingRecord">
              <el-icon><LocationFilled /></el-icon> 外出列表
            </el-menu-item>
            <el-menu-item index="/checkOutRecord">
              <el-icon><RemoveFilled /></el-icon> 退住列表
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="serviceManagement">
            <template #title>
              <el-icon><Tools /></el-icon> 服务管理
            </template>
            <el-menu-item index="/careRecord">
              <el-icon><Service /></el-icon> 客户日常护理
            </el-menu-item>
            <el-menu-item index="/mealSet">
              <el-icon><Food /></el-icon> 客户膳食配置
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>

      <!-- 底部安全退出 -->
      <div class="sidebar-footer">
        <el-button type="danger" @click="logout" block>
          <el-icon><SwitchButton /></el-icon> 安全退出
        </el-button>
      </div>
    </el-aside>


    <!-- 主区 -->
    <el-container>
      <!-- 顶栏 -->
      <el-header class="header">
        <div class="logo-container">
          <img src="~@/assets/logo.png" alt="Logo" class="logo-image" /> <!-- 使用 ~@ 来引用图片 -->
        </div>
        <div class="header-right">
          <el-dropdown
              trigger="hover"
              @command="handleHeaderCommand"
              class="no-outline-dropdown"
          >
            <!-- 触发器 -->
            <span class="welcome-text" tabindex="0">
        欢迎您，
        <span class="user-link">{{ adminName }}</span>
        <i class="el-icon-arrow-down"></i>
      </span>
            <!-- 下拉菜单：Vue3 语法 -->
            <template #dropdown>
              <el-dropdown-item command="editProfile">
                <el-icon><Setting/></el-icon>
                个人资料修改
              </el-dropdown-item>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-main class="main">

        <!-- 标签页区域 -->
        <el-tabs
            v-model="activeTab"
            type="card"
            closable
            @tab-click="handleTabClick"
            @tab-remove="removeTab"
        >
          <el-tab-pane
              v-for="tab in tabs"
              :key="tab.path"
              :label="tab.title"
              :name="tab.path"
              :closable="tab.path !== '/'"
          >
<!--          <el-tab-pane-->
<!--              v-for="tab in tabs"-->
<!--              :key="tab.path"-->
<!--              :label="tab.title"-->
<!--              :name="tab.path"-->
<!--          >-->
            <!-- 内容区域只在当前激活标签页展示 -->
            <keep-alive>
              <router-view v-if="activeTab === tab.path" />
            </keep-alive>
          </el-tab-pane>
        </el-tabs>
      </el-main>


    </el-container>

    <Assistant />
  </el-container>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Assistant from '@/components/Assistant.vue'

import { adminName } from '@/store/user'
// 导入图标
import {
  User, UserFilled, Setting, Service, Food, Calendar, Menu,
  House, MapLocation, Files, SwitchButton, List,Avatar,
  Histogram, DataLine, Tools, LocationFilled, CloseBold,RemoveFilled
} from '@element-plus/icons-vue'


// Router + route
const router = useRouter()
const route = useRoute()

// 从 localStorage 中读取角色和用户名
const role = localStorage.getItem('role') || ''
// 侧边栏高亮，同步当前路径
const activeMenu = ref(route.path)
watch(() => route.path, p => {
  activeMenu.value = p
})
function handleHeaderCommand(cmd) {
  if (cmd === 'editProfile') {
    router.push({ name: 'ChangeProfile' })
  } else if (cmd === 'logout') {
    localStorage.clear()
    router.replace({ name: 'Login' })
  }
}
// 安全退出：清除存储并跳转登录
function logout() {
  localStorage.removeItem('token')
  localStorage.removeItem('adminName')
  localStorage.removeItem('role')
  router.replace({ name: 'Login' })
}
// 面包屑数据：取当前匹配的所有路由，筛出带 title 的
const crumbRoutes = computed(() =>
    route.matched.filter(r => r.meta.title && r.name !== 'Layout')
)

// 标签页管理
const tabs = ref([{ title: '欢迎页', path: '/' }])
const activeTab = ref(route.path)

watch(
    () => route.path,
    newPath => {
      const title = route.meta.title || '未命名'
      if (!tabs.value.find(t => t.path === newPath)) {
        tabs.value.push({ title, path: newPath })
      }
      activeTab.value = newPath
    },
    { immediate: true }
)

function handleTabClick(pane) {
  if (pane.props.name && pane.props.name !== route.path) {
    router.push(pane.props.name)
  }
}

function removeTab(targetPath) {
  if (targetPath === '/') {
    // 不允许关闭欢迎页
    return;
  }
  const idx = tabs.value.findIndex(t => t.path === targetPath)
  tabs.value.splice(idx, 1)
  if (activeTab.value === targetPath) {
    const next = tabs.value[idx] || tabs.value[idx - 1]
    router.push(next ? next.path : '/')
  }
}
</script>

<style scoped>
/* 设置整个页面的背景 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #app {
  height: 100%;
}

.el-container {
  background-image: url(~@/assets/图4.jpg); /* 使用 ~@/assets 引用图片 */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.98; /* 设置透明度 */
}

/* 侧边栏背景色 */
.sidebar {
  background-color: rgba(255, 255, 255, 0.75); /* 透明背景 */
  color: #4A3F35;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 0;
  position: relative;
}

/* 2. 艺术字 + 位置调整 */
.logo {
  position: absolute;       /* 绝对定位 */
  top: 17px;                 /* 距离父容器顶部 5px，你可以调成负值比如 -5px */
  left: 10px;               /* 距离父容器左侧 10px，同理也可用负值 */
  font-size: 24px;          /* 放大一点 */
  font-family: 'Lobster', cursive;   /* 示例：使用 Google Fonts 的手写艺术字字体 */
  font-weight: normal;      /* 手写字通常不加粗，这里按需求设 */

  /* 渐变文字 + 剪裁显示 */
  background: linear-gradient(45deg, #f19e54, #f7a36d);
  -webkit-background-clip: text;
  color: transparent;

  /* 加点阴影让文字更立体 */
  text-shadow:
      2px 2px 4px rgba(0,0,0,0.25),
      -1px -1px 2px rgba(255,255,255,0.3);

  letter-spacing: 2px;      /* 字符间距 */
  line-height: 1;           /* 紧凑一些 */
}

/* 菜单去掉默认背景并应用主题 */
.menu-custom {
  margin-top: 36px;
  flex: 1;
  background: transparent !important;
  border-right: none;
}
.menu-custom .el-menu-item,
.menu-custom .el-sub-menu__title {
  padding-left: 24px !important;
  height: 40px;
  line-height: 40px;
}

/* 面包屑容器 */
.app-breadcrumb {
  margin-bottom: 16px;
  background-color: var(--secondary);
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
/* 分隔符 */
::v-deep .app-breadcrumb .el-icon-arrow-right {
  color: var(--primary);
  margin: 0 8px;
}

::v-deep .app-breadcrumb .el-breadcrumb__item {
  font-size: 14px;
  color: var(--text);
  transition: color .2s;
}

::v-deep .app-breadcrumb .el-breadcrumb__item.is-link:hover {
  color: var(--primary);
}

::v-deep .app-breadcrumb .el-breadcrumb__item.is-active {
  font-weight: 600;
  color: var(--accent);
}
.menu-custom .el-menu-item:hover,
.menu-custom .el-sub-menu__title:hover {
  background-color: #A17C6B !important;
  color: #fff !important;
}
.menu-custom .el-menu-item.is-active,
.menu-custom .el-sub-menu__title.is-active {
  background-color: #A17C6B !important;
  color: #fff !important;
}
.sidebar-footer .el-button .el-icon {
  margin-right: 8px; /* 根据需要调整数值 */
}
.sidebar-footer .el-button {
  padding: 10px 20px; /* 上下 10px、左右 20px，可根据需求自由调整 */
}
/* logo 样式 */
.logo-container {
  position: static;
  justify-content: flex-end;
}

.welcome-text {
  font-size: 15px;
  font-weight: 650;    /* 加粗，400 是常规，700 更粗，可根据需要调 */
  color: #4A3F35;
  cursor: pointer;
}

.logo-image {
  height: 24px;        /* 比 35px 小一点，比如 28px */
  width: auto;
}

/* 底部安全退出 */
.sidebar-footer {
  text-align: center;
  padding-top: 20px;
}
.sidebar-footer .el-button {
  background-color: #A17C6B;
  border-color: #A17C6B;
  color: #fff;
}

/* 顶栏背景色 */
.header {
  background-color: rgba(255, 255, 255, 0); /* 透明背景 */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  gap: 20px; /* 两者之间固定 20px 间隔 */
}
.header-right {
  display: flex;
  align-items: center;
}
/* 禁掉 el-dropdown 触发器的 outline */
.no-outline-dropdown .el-dropdown__trigger,
.welcome-text {
  outline: none !important;
}

/* 如果要更精细，只去掉 focus 的黑边 */
.welcome-text:focus,
.user-link:focus {
  outline: none;
}
.user-link {
  color: #409EFF;
  text-decoration: underline;
  margin: 0 0px;
}
.el-dropdown-menu__item i {
  vertical-align: middle;
  margin-right: 6px;
}
.main {
  padding: 20px;
  background: #ffffff;
  flex: 1;
}
</style>
